<script setup lang="ts">
import {ref,onMounted} from 'vue'
const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

const pos = ref([
  [323, 399,1.2,3],
  [68,359,1,3],
  [117,240,0.8,1],
  [535,240,0.8,1],
  [591,359,1,3],
])

const am = () => {
  let pos0 = pos.value[0]
  for (let i = 0; i < pos.value.length; i++){
    if(i == pos.value.length - 1){
      pos.value[i] = pos0
    }else{
      pos.value[i] = pos.value[i + 1]
    }
  }
}

const timer = ref()
onMounted(()=>{
  if(timer.value) clearInterval(timer.value)
  am()
  timer.value = setInterval(()=>{
    am()
  },4000)
})
</script>

<template>
  <div class="bg w-[164px] h-[72px] flex flex-col justify-center items-center absolute" :style="{
      left:`${pos[0][0]}px`,
      top: `${pos[0][1]}px`,
      transform: `scale(${pos[0][2]})`,
      zIndex:pos[0][3]
    }">
    <div class="text-[#808080] text-[14px] font-medium ff-YouSheBiaoTiHei"><span class="text-[#FB2D19] text-[24px]">{{ data.height }}</span>cm</div>
    <div class="text-[#1A1A1A] text-[14px] mt-[-10px]">身高</div>
  </div>
  <div class="bg w-[164px] h-[72px] flex flex-col justify-center items-center absolute" :style="{
      left:`${pos[1][0]}px`,
      top: `${pos[1][1]}px`,
      transform: `scale(${pos[1][2]})`,
      zIndex:pos[1][3]
    }">
    <div class="text-[#808080] text-[14px] font-medium ff-YouSheBiaoTiHei"><span class="text-[#FB2D19] text-[24px]">{{ data.weight }}</span>kg</div>
    <div class="text-[#1A1A1A] text-[14px] mt-[-10px]">体重</div>
  </div>
  <div class="bg w-[164px] h-[72px] flex flex-col justify-center items-center absolute" :style="{
      left:`${pos[2][0]}px`,
      top: `${pos[2][1]}px`,
      transform: `scale(${pos[2][2]})`,
      zIndex:pos[2][3]
    }">
    <div class="text-[#808080] text-[14px] font-medium ff-YouSheBiaoTiHei"><span class="text-[#FB2D19] text-[24px]">{{ data.bodyage }}</span></div>
    <div class="text-[#1A1A1A] text-[14px] mt-[-10px]">身体年龄</div>
  </div>
  <div class="bg w-[164px] h-[72px] flex flex-col justify-center items-center absolute" :style="{
      left:`${pos[3][0]}px`,
      top: `${pos[3][1]}px`,
      transform: `scale(${pos[3][2]})`,
      zIndex:pos[3][3]
    }">
    <div class="text-[#808080] text-[14px] font-medium ff-YouSheBiaoTiHei"><span class="text-[#FB2D19] text-[24px]">{{ data.bodyScore }}</span></div>
    <div class="text-[#1A1A1A] text-[14px] mt-[-10px]">健康评分</div>
  </div>
  <div class="bg w-[164px] h-[72px] flex flex-col justify-center items-center absolute" :style="{
      left:`${pos[4][0]}px`,
      top: `${pos[4][1]}px`,
      transform: `scale(${pos[4][2]})`,
      zIndex:pos[4][3]
    }">
    <div class="text-[#808080] text-[14px] font-medium ff-YouSheBiaoTiHei"><span class="text-[#FB2D19] text-[24px]">{{ data.bmi }}</span>BMI</div>
    <div class="text-[#1A1A1A] text-[14px] mt-[-10px]">体质指数</div>
  </div>
</template>

<style scoped lang="scss">
.bg{
  background: url("@/assets/img/icon/bg_xlxysqxy.png") 0 0 /100% 100% no-repeat;
  transition: all 4s linear
}

.app-df{
  transform: rotateX(-10deg);
  //opacity: 0.9;
  //z-index: 3;
  overflow: visible;
  transform-style:preserve-3d;
}

.df{
  overflow: visible;
  //left: 53%;
  //width:120px;
  //height:350px;
  //animation:rotations 20s linear infinite;
  transform-style:preserve-3d;
}

//.df>div:nth-of-type(1){
//  opacity: 0.8;
//  transform:rotateY(0deg) translateZ(300px);
//}
//.df>div:nth-of-type(2){
//  opacity: 0.8;
//  transform:rotateY(72deg) translateZ(300px);
//}
//.df>div:nth-of-type(3){
//  opacity: 0.8;
//  transform:rotateY(144deg) translateZ(300px);
//}
//.df>div:nth-of-type(4){
//  opacity: 0.8;
//  transform:rotateY(216deg) translateZ(300px);
//}
//.df>div:nth-of-type(5){
//  opacity: 0.8;
//  transform:rotateY(288deg) translateZ(300px);
//}

@keyframes rotations{
  /* 添加动画效果 */
  0%{}
  100%{
    transform:rotateY(360deg);
  }
}
</style>
